<template>
  <el-container style="margin: 0 auto; padding-left: 150px">
    <div style="width: 200px; height: 50px; margin-left: 450px">
      <h1
        style="
          text-align: center;
          margin: 0 auto;
          padding: 0;
          color: rgb(94, 99, 116);
        "
      >
        预约实验室
      </h1>
      <el-row style="margin: 0 auto"
        ><span style="margin: 0 auto">Contact&nbsp;&nbsp;us</span></el-row
      >
      <el-row
        style="
          height: 3px;
          width: 100px;
          text-align: center;
          background-color: rgb(226, 159, 43);
          margin: 0 auto;
        "
      ></el-row>
    </div>
    <el-header style="margint-top: 300px">
      <el-row :gutter="2">
        <el-col :span="10">
          <el-time-select
            placeholder="起始时间"
            v-model="startTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
          >
          </el-time-select>
          <span>至</span>
          <el-time-select
            placeholder="结束时间"
            v-model="endTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
              minTime: startTime,
            }"
          >
          </el-time-select
        ></el-col>
        <!-- 远程搜索 -->
        <el-col :span="4">
          <el-select
            v-model="value"
            multiple
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2"><el-button type="success">搜索</el-button></el-col>
        <el-ccol :span="4"><el-button type="danger">清除</el-button></el-ccol>
      </el-row>
      <el-row justify="end"> </el-row>
    </el-header>
    <el-main>
      <el-row :justify="2">
        <el-col
          v-for="(o, index) in 2"
          :key="o"
          :span="8"
          :offset="index > 0 ? 4 : 0"
        >
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="200px;"
          >
            <img
              src="https://gd-hbimg.huaban.com/523a8404994ac5809bbee1b7ce0cf63155a705a7103e8f-PkVo7u"
              class="image"
            />
            <div style="padding: 12px; height: ">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    实验室设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="margin-top: 20px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 12px">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    实验室设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="margin-top: 20px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 12px">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    主要设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="margin-top: 20px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 12px">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    主要设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="margin-top: 20px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 12px">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    主要设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
          <el-card
            :body-style="{ padding: '0px' }"
            shadow="hover"
            style="margin-top: 20px"
          >
            <img
              src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image"
            />
            <div style="padding: 12px">
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室名称：{{ $route.params.name }}
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">
                    实验室状态：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple-light">
                    主要设备：
                  </div></el-col
                ></el-row
              >
              <el-row
                ><el-col :span="24"
                  ><div class="grid-content bg-purple">使用时间：</div></el-col
                ></el-row
              >
              <div class="bottom">
                <time class="time">{{
                  currentDate.getFullYear() +
                  "年" +
                  currentDate.getMonth() +
                  "月" +
                  currentDate.getDate() +
                  "日"
                }}</time>
                <el-button text class="button">现在预约</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "Usermine",
  data() {
    return {
      currentDate: new Date(),
      startTime: "",
      endTime: "",
    };
  },
};
</script>
<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 5px;
  line-height: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  height: 300px;
  display: block;
}
</style>
